<!--开店额度-->
<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll babyBuy">
            <group class="pay_style">
                <cell title="当前拥有帅呗数量" :value="total+'个'"></cell>
                <cell title="当前帅呗价格" value="500/个">{{config.virtualCoinPrice}}/个</cell>
            </group>
            <group class="main_c_b_s_o">
                <x-number  v-model="buyNumber" :title=xNumTitle :min="1" :max="config.buyVirtualCoinLimit" @on-change="numberChange"
                          fillable>
                </x-number>
            </group>
            <div class="rent_pay">
                <div class="title">选择支付方式</div>
                <div>
                    <v-payMethod @change="change" show="true"></v-payMethod>
                </div>
            </div>
            <div class="subBtn">
                <div>
                    <span>合计&nbsp;</span>
                    <span class="amount">￥{{amount}}</span>
                </div>
                <button :class="disabled" :disabled="disabled != ''" v-on:click="payMode == 6?changeShow(true):gotoPage()">立即支付
                </button>
            </div>
            <v-pay :show="payShow" @changeShow="changeShow" @pay="conPw"></v-pay>
        </div>
    </div>
</template>
<script>
    import {Cell,Group,XNumber} from 'vux'
    import {mapActions, mapState} from 'vuex'
    import {UPDATA_INTERACTIVE} from 'store/interactive'
    import {SETCONFIG} from 'store/config'

    export default {
        components:{
            Cell,
            Group,
            XNumber
        },
        name: 'rentPay',
        data(){
            return {
                disabled:'',
                password:'',
                payMode:this.comJS.payMethodscheck(),
                payShow:false,
                financeId:'',
                buyNumber:1,
                amount:0,
                total:0,
                xNumTitle: ''
            }
        },
        activated(){
            this.init();
        },
        deactivated(){
            this.UPDATA_INTERACTIVE({type:'IsClearSetinterval',content:{type:"0"}});
        },
        methods:{
            ...mapActions([UPDATA_INTERACTIVE,SETCONFIG]),
            init(){
                this.payMode=this.comJS.payMethodscheck();
                this.password = '';
                this.payShow = false;
                this.financeId = ''
                this.buyNumber = 1
                this.disabled = ''
                this.amount = this.buyNumber * this.config.virtualCoinPrice;
                this.total = 0
                this.getBaobei()
                this.xNumTitle = "<div>购买数量<span style='font-size:.26rem;color: #d43228;'>(当前剩余" + (Number(this.config.virtualCoinAmount) - Number(this.config.buyVirtualCoinAmount)) + "个)</span></div>"
                this.configManage()
                this.checkDisabled()
            },
            configManage(){  // 获取配置
                this.$ajax.finance.configManage()
                    .then((res)=>{
                        for(let item in res.body.content){
                            if(item != 'drawbackAccountBank' && item != 'drawbackAccountName' && item != 'drawbackAccountNumber'){
                                res.body.content[item] = Number(res.body.content[item])
                            }
                        }
                        this.SETCONFIG(res.body.content);
                    })
            },
            getBaobei() {
                this.$ajax.finance.getVirtualcoinInfo()
                    .then(res => {
                        this.total = res.body.content.amount && res.body.content.amount != null? res.body.content.amount:0;
                    })
            },
            change(value){
                this.password = '';
                this.payMode = value[0];
            },
            changeShow(boolean){
                this.payShow = boolean
            },
            conPw(res) {
                this.changeShow(false);
                this.password = res;
                this.gotoPage();
            },

            numberChange(val){
                this.buyNumber = parseInt(val);
                this.amount = this.buyNumber * this.config.virtualCoinPrice;
            },
            gotoPage(){   //支付
                this.$ajax.finance.consumptionPay({
                    amount:parseInt(this.buyNumber),
                    payMode:this.payMode,
                    password : this.password,
                    consumptionMode:'7'
                }).then((res)=>{
                    this.financeId = res.body.content.financeId;
                    this.UPDATA_INTERACTIVE({type: 'IsClearSetinterval', content: {type: "1"}}) //打开轮询开关
                    if(this.payMode == 1){  // 微信支付  唤起微信
                        setInterval(()=>this.checkPayResult(),1000)
                        this.comJS.gotopay(1,{payInfo:res.body.content.orderString ,type:"3",callback:this.payok,errorCallback:this.payErrey});
                    }else if(this.payMode == 2){  //支付宝
                        setInterval(()=>this.checkPayResult(),1000)
                        this.comJS.gotopay(2,{payInfo:res.body.content.orderString ,type:"3",callback:this.payok,errorCallback:this.payErrey});
                    }else{   //余额支付
                        this.payok();
                    }
                })
            },
            payok(){
                this.configManage() // 重新获取配置
                this.UPDATA_INTERACTIVE({type: 'IsClearSetinterval', content: {type: "2"}});
                // alert("支付成功")
                this.$router.replace({
                    path:'/my/babyWs/buyok',
                      query:{
                      }
                })

            },
            payErrey(){
                this.UPDATA_INTERACTIVE({type: 'IsClearSetinterval', content: {type: "2"}});
                this.$vux.toast.text('支付失败', 'middle');
            },
            //轮询支付状态
            checkPayResult(){
                if(this.interactive.IsClearSetinterval.type == "2"){  //从接口收到了支付状态
                    return;
                }
                if (this.interactive.IsClearSetinterval.type == "1"){
                    global.myLoad = true;
                    this.$ajax.finance.checkPayResult({financeId:this.financeId})
                        .then((res)=>{
                            if (res.body.content.isPaySuccess) {
                                that.UPDATA_INTERACTIVE({type: 'IsClearSetinterval', content: {type: "2"}});   //取消轮询获取订单状态
                                this.payOk();
                            }
                        })
                }

            },
            checkDisabled(){
                if(this.buyNumber > 0 && this.buyNumber <= (Number(this.config.virtualCoinAmount) - Number(this.config.buyVirtualCoinAmount))){
                    this.disabled = ''
                } else {
                    this.disabled = 'disabled'
                }
            }
        },
        watch: {
            buyNumber: 'checkDisabled'
        },
        computed: mapState({interactive:state=>state.interactive,config: state=>state.config})
    }
</script>
<style lang="less">
    @import "./css/pay";
</style>
<style lang="less" scoped>
    @import "../../less/_variable.less";
    .subBtn {
        width: 100%;
        height: 1.06rem;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        position: absolute;
        left: 0;
        bottom: 0;
        button {
            width: 2.9rem;
            /*background: @c_buttonOkBgColor;*/
            background: #272727;
            text-align: center;
            line-height: 1.06rem;
            font-size: 0.36rem;
            color: #fff;

        }
        div {
            flex: 1;
            padding-right: 0.3rem;
            font-size: 0.28rem;
            color: #141414;

            display: flex;
            align-items: center;
            justify-content: flex-end;
            .amount {
                font-size: 0.34rem;
                color: @c_buttonHoverBgColor;
            }
            span:last-child {
                color: #e94f4f;
            }
        }
    }
</style>